<template>
    <div class="home_header_wrapper">
        <div class="choose_address" @click="handleAddressClick">
            <span>
              <span class="iconfont">&#xebb6;</span>
              {{homeAddressTitle}}
              <span class="iconfont arrow">&#xe771;</span>
            </span>
        </div>
        <router-link :to="userInfo ? `/search/${geohash}` : '/login'">
          <div class="searchBox" :class="isFixed === true ? 'isFixed' : ''">
            <div class="con">
              <span class="iconfont">&#xeba5;</span>
              <span>搜索饿了么商家、商品名称</span>
            </div>
          </div>
        </router-link>
    </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
export default {
  name: 'HomeHeader',
  props: ['geohash', 'homeAddressTitle'],
  data () {
    return {
      isFixed: false
    }
  },
  mounted () {
    // 获取用户信息
    this.getUserInfo()

    window.addEventListener('scroll', this.watchScroll)
  },
  computed: {
    ...mapState(['userInfo'])
  },
  methods: {
    ...mapActions(['getUserInfo']),

    handleAddressClick () {
      this.$emit('open')
    },

    watchScroll () {
      var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      // 当滚动超过 50 时，实现吸顶效果
      if (scrollTop > 50) {
        this.isFixed = true
      } else {
        this.isFixed = false
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
  .home_header_wrapper
    font-size: .34rem
    .isFixed
      position: fixed
      top: 0
      left: 0
      right: 0
      z-index: 999
    .choose_address
      height: .68rem
      line-height: .68rem
      font-weight: bold
      color: #fff
      padding: .2rem .2rem 0
      background-image: linear-gradient(90deg, #0af, #0085ff)
      .iconfont
        font-size: .35rem
        color: #fff
      .arrow
        display:inline-block;
        transform: scale(0.4) /* 不能作用于inline元素上，例如span，可以给span加display:inline-block;属性*/
    .searchBox
      height: .72rem
      padding: .15rem .28rem
      background-image: linear-gradient(90deg, #0af, #0085ff)
      .con
        line-height: .72rem;
        display: flex
        font-size: .30rem
        flex-direction: row
        justify-content: center
        background: #fff;
        color: #999
        .iconfont
          font-size: .35rem
          margin-right: .1rem
</style>
